<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./script/jquery.js" type="text/javascript"></script>
    <script src="./script/webuploader.js" type="text/javascript"></script>
    <link href="./script/webuploader.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <div id="file"></div>
        <br/>
        <div id="process">
            <h2>进度</h2>
        </div>
        <div>
            <h2>总的进度</h2>
            <span id="totalProcess"></span>
        </div>
    </div>
</div>
    <script>


        $(function(){
            var obj = {}
            var totalSize = 0;
            var uploader = WebUploader.create({
                // swf文件路径
                swf: './script/Uploader.swf',
                // 文件接收服务端。
                server: 'http://172.17.125.76:8888/img/v1/upload',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false
            });

            uploader.on( 'fileQueued', function( file ) {
                // console.info("fileid: "+ file.id+" ,fileName: "+ file.name+" ,size: "+ file.size);
                var fileId = file.id;
                $("#file").append("文件名称: "+file.name+"<br/>")
                $("#process").append("<div>"+file.name+":&nbsp; &nbsp;<span id='file_"+fileId+"'></span></div>")
                totalSize= totalSize+file.size;
                obj[fileId]= {size:file.size,pre:0}
                // console.info("total: "+totalSize+" , kaishi: "+ JSON.stringify(obj))
                uploader.upload(file);
            });

            uploader.on( 'uploadSuccess', function( file ) {
                  // console.info("上传成功")
            });

            uploader.on( 'uploadError', function( file ) {
                // console.info("上传失败")
            });

            uploader.on( 'uploadComplete', function( file ) {
                // console.info("上传完成: id: "+file.id+" ,name: "+ file.name)
            });

            var obj ={}

            uploader.on( 'uploadProgress', function(file, percentage ) {
                var hasUploadSize= 0;
                var fileId = file.id;
                var process = percentage*100;
                var s = parseInt(process);
                $("#file_"+fileId).html(s+"%");
                obj[fileId]={size:obj[fileId].size,pre:percentage};
                // console.info("obj: "+ JSON.stringify(obj))
                Object.keys(obj).forEach(function(key){
                    hasUploadSize = hasUploadSize+obj[key].size*obj[key].pre;
                });
                var hasUploadSizePre = (hasUploadSize/totalSize)*100;
                var ss = parseInt(hasUploadSizePre);
                $("#totalProcess").html(ss+"%");


            });

            // $("#ctlBtn").click(function(){
            //     console.info("上传的文件id： "+ fileId+"  ,上传进度: id: "+file.id+" ,name: "+ file.name)
            //     uploader.upload(fileId);
            // })
        });

        // function upload(){
        //     console.info("开始上传、。。。")
        // }
    </script>
</body>
</html>